<!--ZJ-->
<!--2017/10/19-->
<template>
    <section>
        <!--搜索start -->
        <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>
            <el-form :inline='true' :model='filters' @submit.native.prevent>
                <el-form-item label='优惠劵名称'>
                    <el-input v-model='filters.coupon_title' placeholder='优惠劵名称'></el-input>
                </el-form-item>
                <el-form-item label=''>
                    <template>
                        <el-select v-model='filters.coupon_type' placeholder='优惠劵类型'>
                            <el-option label='全场赠卷' value='1'></el-option>
                            <el-option label='注册赠卷' value='2'></el-option>
                            <el-option label='购物赠卷' value='3'></el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item>
                    <el-button type='primary' v-on:click='getCoupons' icon='el-icon-search'>查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type='default' v-on:click='handleRestFilters' icon='el-icon-refresh'>重置</el-button>
                </el-form-item>
                <el-form-item style='float: right'>
                    <router-link to='/marketing/coupon/add-coupon'>
                        <el-button type='primary'><i class='el-icon-plus'></i></el-button>
                    </router-link>
                </el-form-item>

            </el-form>
        </el-col>
        <!--搜索end  -->

        <!--表格start -->
        <el-table :data='couponList' style='width: 100%;'>
            <el-table-column type='index'>
            </el-table-column>
            <el-table-column prop='coupon_title' label='优惠劵名称'>
            </el-table-column>
            <el-table-column prop='coupon_type' label='优惠劵类型' :formatter='typeFormatter'>

            </el-table-column>
            <el-table-column prop='products' label='可使用商品' :formatter='productsFormatter'>
            </el-table-column>
            <el-table-column prop='coupon_threshold' label='使用门槛'>
            </el-table-column>
            <el-table-column prop='coupon_price' label='面值'>
            </el-table-column>
            <el-table-column prop='coupon_platform' label='适用平台' :formatter='platformFormatter'>
            </el-table-column>
            <el-table-column prop='expire_days' label='有效期' :formatter='validityFormatter'>
            </el-table-column>
            <el-table-column prop='coupon_status' label='状态' :formatter='statusFormatter'>
            </el-table-column>
            <el-table-column label='操作' width='150'>
                <template slot-scope='scope'>
                    <router-link :to="'/marketing/coupon/edit-coupon/'+scope.row.coupon_id">编辑</router-link>
                    <a @click='handleDelete(scope.$index, scope.row)'>删除</a>
                </template>
            </el-table-column>
        </el-table>
        <!--表格end -->
        <!--分页start -->
        <el-col :span='24' class='toolbar'>
            <el-pagination layout='total, sizes, prev, pager ,next' :page-size='filters.pageSize'
                           :total='pagination.total'
                           @current-change='handlePageChange' @size-change='handleSizeChange'>
            </el-pagination>
        </el-col>
        <!--分页start -->

    </section>
</template>
<script>
import { getCouponList, deleteCoupon } from '../../api/api';
import util from '../../common/js/util';

export default {
  data () {
    return {
      fileHeader: {
        Authorization: `Bearer ${this.$store.state.token}`,
        Accept: 'application/json' // 火狐下需要指定返回的格式，不然默认返回xml
      },
      couponList: [],
      page: 1,
      filters: {
        pageSize: 10,
        page: 1,
        coupon_name: '1',
        coupon_type: '',
        sort: '',
        expand: 'products'
      },
      pagination: {
        total: 0
      }
    };
  },
  methods: {
    // 获取列表
    getCoupons () {
      getCouponList(this.filters).then(res => {
        this.couponList = res.data;
        this.pagination.total = res.totalCount;
      });
    },
    // 删除
    handleDelete (index, row) {
      this.$confirm(`确认删除<${row.coupon_title}>？`, '提示', {})
        .then(valid => {
          if (valid) {
            deleteCoupon(row.coupon_id).then(res => {
              if (parseInt(res.status) === 1) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                this.getCouponList();
              }
            });
          }
        })
        .catch(() => {});
    },
    statusFormatter (index) {
      let date = util.formatDate.format(new Date(), 'yyyy-MM-dd hh:mm:ss');

      if (
        index.expire_days != null ||
        (date > index.start_time && date < index.end_time)
      ) {
        return (index.coupon_status = '进行中');
      }
      if (date < index.start_time) {
        return (index.coupon_status = '未开始');
      }
      if (date > index.end_time) {
        return (index.coupon_status = '已结束');
      }
    },
    validityFormatter (index) {
      if (index.expire_days != null) {
        return index.expire_days + '天';
      } else {
        return index.start_time + ' 至 ' + index.end_time;
      }
    },
    platformFormatter (index) {
      return index.coupon_platform === 1
        ? '全平台'
        : index.coupon_platform === 2 ? '移动' : 'PC';
    },
    typeFormatter (index) {
      return index.coupon_type === 1
        ? '全场赠卷'
        : index.coupon_type === 2 ? '注册赠卷' : '购物赠卷';
    },
    productsFormatter (index) {
      if (index.coupon_available === 1) {
        return '全部商品';
      } else if (index.products !== '') {
        let productArr = [];
        for (let value of index.products) {
          productArr.push(value.product_name);
        }
        return productArr.join(',');
      }
    },

    // 重置搜索列表
    handleRestFilters () {
      this.filters = {
        pageSize: 10,
        page: 1,
        coupon_name: '',
        coupon_type: '',
        sort: '',
        expand: 'products'
      };
      this.getCoupons();
    },
    // 页码改变
    handlePageChange (page) {
      this.filters.page = page;
      this.getCoupons();
    },
    // 分页条数改变
    handleSizeChange (size) {
      this.filters.pageSize = size;
      this.getCoupons();
    }
  },
  mounted () {
    this.getCoupons();
  }
};
</script>
<style rel='stylesheet/sass' lang='sass' scoped>
    a
        color: #409EFF
        cursor: pointer
        margin-right: 20px
        text-decoration: none
</style>
